<template>
  <div>
    <van-nav-bar
  title="注册"
  left-arrow
  @click-left="onClickLeft"
/>
    <van-form @submit="onSubmit">
  <van-field
    v-model="username"
    name="username"
    placeholder="请输入账号"
    :rules="[{ required: true, message: '账号为必填项' },
        { pattern:/\w{5,8}/, message: '长度为5到8位，只能出现数字、字母、下划线' }
    ]"
  />
  <van-field
    v-model="password"
    type="password"
    name="password"
    placeholder="请输入密码"
    :rules="[{ required: true, message: '密码为必填项' },
        { pattern:/\w{5,12}/, message: '长度为5到12位，只能出现数字、字母、下划线' }
    ]"
  />
  <div style="margin: 16px;">
    <van-button  block type="primary" native-type="submit">注册</van-button>
  </div>
</van-form>
<div class="link">
  <router-link class="ccc" to="/homepage">点我回首页</router-link>
<router-link class="ccc" to="/login">已有账号，去登陆~</router-link>

</div>
  </div>
</template>

<script>
import { register } from '@/api-ajax/house.js'
export default {
  name: 'RegisterPage',
  data () {
    return {
      username: '',
      password: ''
    }
  },
  methods: {
    async onSubmit (values) {
      // console.log('submit', values)
      const data = await register(values)
      console.log(data)
      this.$toast('成功注册')
      setTimeout(() => {
        this.$router.push('/login')
      }, 300)
    },
    onClickLeft () {
      this.$router.back()
    }

  }

}
</script>

<style scoped>
.link {
  color: #666;
  text-align: center;

}
 .ccc {
    color: #ccc;
  }

</style>
